<template>
    <div id="head">
        <div>
            <section class="left_content">
                <van-icon class="icon" name="arrow-left" @click="back" />
                <span class="title">{{title}}</span>
            </section>
            <section class="right_content">
                <van-button plain round hairline type="info">
                    <van-icon class="icon" name="weapp-nav" /> <i>|</i> <i  class="iconfont icon icon-center"></i>
                </van-button>
            </section>
        </div>
    </div>
</template>

<script>
export default {
  name: '',
  props: ['title'],
  data() { 
    return {

    }
  },
  created() {

  },
  methods:{
      back() {
          this.$router.go(-1)
      }
  },
 }
</script>

<style lang="scss" scoped>
    #head{
        height: 1rem;
        font-size: 0.32rem;
        div{
            display: flex;
            justify-content: space-between;
            padding: 0 .15rem;
            align-items: center;
            section{
                height: 1rem;
                display: flex;
                align-items: center;
                .title{
                    margin-left: .3rem;
                }
                /deep/ button {
                    height: 70%;
                    border-color: #ccc;
                    color: #ccc;
                    .icon{
                        font-size: .28rem;
                    }
                }
                

                i{
                    display: inline-block;
                    vertical-align: middle;
                }
            }
        }
    }
</style>